

.editor {
  display: flex;

  .menuContainer {
    width: 20%;

    .title {
      background: #f2f5fc;
      height: 28px;
      line-height: 28px;
      padding-left: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #575d6c;
      letter-spacing: 0;
      font-weight: bolder;
      border-right: 1px solid #fff;
    }

    .box {
      padding: 20px;
      height: 460px;
      border-bottom: 1px solid #d9d9d9;
      border-top: 1px solid #d9d9d9;
      border-right: 1px solid #d9d9d9;
      overflow: hidden;
      position: relative;

      .treeContainer {
        height: calc(100% - 32px);
        overflow-y: auto;
        width: 100%;
        position: relative;

        :global {
          .ant-tree-node-content-wrapper {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }

      .operations {
        height: auto;
        border-bottom: 1px solid #dfe1e6;
        padding-left: 18px;
        height: 46px;
        display: flex;
        align-items: center;

        :global {
          .ant-btn {
            font-size: 18px;
            color: #575d6c!important;
            margin-right: 8px;
            padding: 0 9px!important;
            min-width: 32px;
          }
        }
      }

      .desBox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;

        .desTitle {
          position: relative;
          height: 38px;
          line-height: 38px;
          color: #252b3a;
          font-weight: bolder;
          border-top: 1px solid #dfe1e6;
          padding: 0 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .desList {
          height: 106px;
          overflow-y: auto;
          padding: 0 18px;

          .desItem {
            margin-bottom: 5px;

            p {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .menuContainer:first-child {
    .box {
      border-left: 1px solid #d9d9d9;
    }
  }

  .menuContainer:last-child {
    width: 60%;

    .title {
      border-right: 0;
    }

    .box {
      padding: 0;
    }
  }
}


.sqlEditor {
  width: 100%;
  height: calc(100% - 190px);
  // border: 1px solid #d9d9d9;
  :global {
    .react-codemirror2 {
      width: 100%;
      height: 100%;
    }
    .CodeMirror {
      width: 100%;
      height: 100%;
    }

    .CodeMirror-scroll {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 10px;

      &::-webkit-scrollbar {
        width: 0;
      }
    }

    .expression-key, .expression-marker {
      font-size: 12px;
      color: #6882da;
      margin-right: 2px;
      margin-left: 2px;
    }

    .expression-marker {
      background: #f2f5fc;
      border-radius: 2px;
      display: inline-block;
      height: 22px;
      line-height: 22px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .cm-s-eclipse span.cm-operator, .cm-s-eclipse span.cm-bracket, .cm-s-eclipse span.cm-comment {
      color: #575d6c;
      margin-right: 2px;
      margin-left: 2px;
    }
  }
}

